<template>
  <view>
    <view class="mch_info">
      <image
        class="avatar"
        :src="
          mch_info.mch_logo
            ? 'http:' + mch_info.mch_logo
            : 'https://img.xingkonglian.net/img/common/shop_default.png'
        "
      ></image>
      <view class="right">
        <view class="mch_wx_name">{{ mch_info.mch_name }}</view>
        <view class="goods_btn">商户号：{{ mch_info.mch_code }}</view>
      </view>
    </view>
    <view class="with_draw_box">
      <view class="top_box">
        <view class="tip_container">
          <text style="color: #9d9ca3">充值金额金额</text
          ><i class="iconfont icon-wenhao" style="marigin-left: 10rpx"></i>
        </view>
        <!-- <view class="can_with_count">￥{{ mch_info.balance }}</view> -->
        <u-input
          v-model="pay_param.price"
          type="number"
          :border="false"
          placeholder="请输入充值金额"
          :custom-style="input_style"
        />
      </view>
      <view class="bottom_box">
        <!-- <view class="can_with_text"
          >当前可用余额<span>{{ mch_info.balance }}元</span></view
        > -->

        <van-button custom-class="with_btn" @tap="wxpay" :disabled="!had_wechat"
          v-if="providerList[0]&&providerList[0].name">充值</van-button
        >
      </view>
    </view>
    <view class="tip_box">
      <!-- <view>1、提现申请预计12小时内到账 </view>
      <view>2、每月22号结算上个月有效订单</view>
      <view>3、余额可随时提现</view> -->
    </view>
    <van-dialog id="van-dialog" />
  </view>
</template>

<script>
const app = getApp();
import Dialog from "../../wxcomponents/vant/dialog/dialog";
import { wxpay,orderpay_confirm ,uc_info} from "../../utils/imapi";
export default {
  props: {},
  components: {},
  data() {
    return {
      mch_info: {},
         pay_param: {
        price: undefined,
        in_out: "I",
        fin_type: "CZ",
        approve_status: "TJ",
        remark: "商家充值",
      },
      input_style: {
        "font-size": "60rpx",
        "margin-top": "40rpx",
      },
      providerList: [],
      had_wechat: true,
    };
  },
  computed: {
    // can_with_count() {
    //   return this.mch_info.balance - this.mch_info.frozen_balance;
    // },
  },
  watch: {},
  onLoad() {
    if(app.globalData.userinfo) {
      this.mch_info = app.globalData.userinfo;
    }else {
      this.uc_info()
    }
    
    uni.getProvider({
      service: "payment",
      success: (e) => {
        console.log("payment success:" + JSON.stringify(e));
        let providerList = [];
        e.provider.map((value) => {
          switch (value) {
            case "wxpay":
              this.had_wechat = true;
              providerList.push({
                name: "微信",
                id: value,
                loading: false,
              });
              break;
            default:
              break;
          }
        });
        this.providerList = providerList;
      },
      fail: (e) => {
        console.log("获取支付通道失败：", e);
        this.had_wechat = false;
      },
    });
  },
  onReady() {},
  onShow() {},
  methods: {
       // 获取商家信息
    async uc_info() {
      try {
        const data = await uc_info();
        console.log(data);
        if (data.code == 0) {
          console.log(data.data.mch_logo);
          this.mch_info = data.data;
          app.globalData.userinfo = data.data;
        }
      } catch (error) {}
    },
    async wxpay() {
      // console.log(plus.os.name.toLowerCase());
      // if (plus.os.name.toLowerCase() == "ios") {
      //   // 跳转到微信小程序
      // } else if (plus.os.name.toLowerCase() == "android") {
        const data = await this.getOrderInfo();
        console.log(data);
        if (data.code == 0) {
          // const orderInfo = data.data;
          const orderInfo = data.data.payParam;
          const bill_no = data.data.bill_no;
          console.log(bill_no);
          console.log(orderInfo);
          uni.requestPayment({
            provider: "wxpay",
            orderInfo: orderInfo,
            success: async (e) => {
              console.log("success", e);
              const res = JSON.parse(e.rawdata);
              console.log(res._wxapi_payresp_prepayid);
              try {
                const res1 = await orderpay_confirm({
                  trade_no: bill_no.toString(),
                });
                console.log(res1);
              } catch (error) {
                console.log(error);
              }
              uni.showToast({
                title: "充值成功!",
              });
              this.pay_param.price=undefined

            },
            fail: (e) => {
              console.log("fail", e);
              uni.showToast({
                title: "支付失败,原因为: " + e.errMsg,
                icon:'none'
              });
              
            },
            complete: (e) => {
              console.log(e);
              // this.providerList[index].loading = false;
            },
          });
        } else {
          uni.showToast({
            title: "操作失败,请稍后重试",
            icon: "none",
          });
        }
      // }
      //   if()
    },
    // 获取订单信息
    async getOrderInfo() {
      if (this.pay_param.price == undefined) {
        return uni.showToast({
          title: "请输入充值金额",
          icon: "none",
        });
      }
      try {
        this.pay_param.price = Number(this.pay_param.price);
        console.log(this.pay_param);
        const data = await wxpay(this.pay_param);
        console.log(data);
        return data;
      } catch (error) {}
    },
  },
  onReachBottom() {},
  onHide() {},
};
</script>

<style scoped lang="scss" scoped>
.mch_info {
  height: 192upx;
  width: 100%;
  border-top: 16upx solid #f0eefd;
  border-bottom: 16upx solid #f0eefd;
  padding-left: 32upx;
  display: flex;
  align-items: center;
  .avatar {
    width: 112upx;
    height: 112upx;
    border-radius: 50%;
    margin-right: 20upx;
  }
  .right {
    // display: flex;
    // align-items: ;
    .mch_wx_name {
      // margin-bottom: 16upx;
    }
    .goods_btn {
      font-size: 28upx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #727278;
    }
  }
}
.with_draw_box {
  padding: 22rpx 30rpx 10rpx;
  border-bottom: 16upx solid #f0eefd;
  .top_box {
    padding: 0rpx 20rpx 14rpx;
    border-bottom: 4rpx solid #fafafe;
  }
  .can_with_count {
    margin-top: 60rpx;
    font-size: 60rpx;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #0a0819;
  }
  .icon-wenhao {
    margin-left: 10rpx;
  }
  .bottom_box {
    .can_with_text {
      padding-left: 24rpx;
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #0a0819;
      margin-top: 20rpx;
      margin-bottom: 60rpx;
      span {
        color: #f95a4b;
      }
    }
    /deep/ .with_btn {
      width: 594rpx;
      height: 80rpx;
      background: #fe3772;
      border-radius: 50rpx;
      text-align: center;
      line-height: 80rpx;
      font-size: 48rpx;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #ffffff;
      margin-left: 46rpx;
      margin-top: 60rpx;
    }
  }
}
.tip_box {
  padding-top: 40upx;
  padding-left: 32upx;
}
</style>
